<template>
    <section class="watchSection">
        <layout :isVertical="true">
            <common-toolbar text="影院放映日志">
                <el-button class="btn commonButton" type="default" @click="getShanxuan">筛选</el-button>
                <!-- <el-button class="btn commonButton" v-if="!onlyShowError" type="default" @click="searchErrorList">仅查看异常数据</el-button> -->
                <!-- <el-button class="btn commonButton" v-if="onlyShowError" type="default"  @click="searchAllList">查看全部数据</el-button> -->
            </common-toolbar>
            <div>
                <formData ref="componentChild" :conmonDisabled="conmonDisabled" :list="list" @condition="condition" @conmonDisabledNone="conmonDisabledNone"></formData>
            </div>
            <layout layout="center"  class="centerSection noScrollSection">
                <el-table
                        :data="data"
                        v-loading.iTable="loading"
                        :stripe="true"
                        ref="mutipleTable"
                        :height="height"
                        :highlight-current-row="true"
                        border
                        :tree-props="{children: 'children'}"
                        row-key="id"
                        header-row-class-name="tableHeader"
                        tooltip-effect="dark"
                        class="watchTable"
                        style="width: 100%">
                    <el-table-column
                            label="No."
                            type="index"
                            :index="indexMethod"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            property="cinema_name"
                            label="影院名称"
                            width="200"
                    >
                    </el-table-column>
                    <el-table-column
                            property="pos_hall_name"
                            label="影厅名称">
                    </el-table-column>
                    <el-table-column
                            property="device_sn"
                            label="设备串号">
                    </el-table-column>
                     <el-table-column
                            property="starttime"
                            label="CPL开始时间"
                            width="160">
                            <template slot-scope="scope">
                                {{getTime(scope.row.starttime)}}
                            </template>
                    </el-table-column>
                     <el-table-column
                            property="endtime"
                            label="CPL结束时间"
                            width="160">
                            <template slot-scope="scope">
                                {{getTime(scope.row.endtime)}}
                            </template>
                    </el-table-column>
                     <el-table-column
                            property="duration"
                            label="时长">
                    </el-table-column>
                     <el-table-column
                            property="cpl_uuid"
                            label="CPL唯一标识"
                            width="200" show-overflow-tooltip="true" >
                    </el-table-column>
                    <el-table-column
                            property="content_title_text"
                            label="CPL名称">
                        <template slot-scope="scope">
                            <div style="text-align: left;line-height: 30px;height: 30px;">
                                <span v-if="scope.row.content_title_text!= undefined&&scope.row.content_title_text!='' ">
                                      <el-tooltip class="item" effect="dark" :content="scope.row.content_title_text" placement="top">
                                        <el-button>{{scope.row.content_title_text}}</el-button>
                                        </el-tooltip>
                                    </span>
                                <span v-else>--</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            property="film_code"
                            label="影片编码">
                            <template slot-scope="scope">
                             <div style="text-align: left;line-height: 30px;height: 30px;">
                                <span v-if="scope.row.film_code!= undefined&&scope.row.film_code!=''  ">
                                      <el-tooltip class="item" effect="dark" :content="scope.row.film_code" placement="top">
                                        <el-button>{{scope.row.film_code}}</el-button>
                                        </el-tooltip></span>
                                <span v-else>--</span>
                            </div>
                             </template>
                    </el-table-column>
                    <el-table-column
                            property="film_name"
                            label="影片名称">
                             <template slot-scope="scope">
                            <div style="text-align: left;line-height: 30px;height: 30px;">
                                <span v-if="scope.row.film_name!= undefined&&scope.row.film_name!='' ">
                                      <el-tooltip class="item" effect="dark" :content="scope.row.film_name" placement="top">
                                        <el-button>{{scope.row.film_name}}</el-button>
                                        </el-tooltip>
                                    </span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="paginationDiv">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="handleCurrentChange"
                            :current-page.sync="page"
                            :page-size="pageSize"
                            :total="total">
                    </el-pagination>
                </div>
            
            </layout>
        </layout>
        <el-dialog
                title="筛选"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="专资编码">
                        <el-input size="small" v-model="form.code"></el-input>
                    </el-form-item>
                    <el-form-item label="影院名称">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-date-picker
                                v-model="form.date"
                                type="daterange"
                                range-separator="至"
                                size="small"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
                <el-button class="btn commonButton" @click="dialogVisible = false">取 消</el-button>
                <el-button class="btn commonButton" type="default" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import Service from './showStatusWatch.service';
import {JSEncrypt} from 'jsencrypt';
import base from '@/scrollLoad';
import moment from 'moment';
import formData from '@/views/form/form.vue';
@Component({components:{
        formData
    }})
export default class cinemaShowLog extends Vue{
    height = 500;
    windowHeight = 700;
    loading = false;
    data = [];
    onlyShowError = false;
    total = 0;
    page = 1;
    pageSize = 30;
    cinemaName = '';
    cinemaCode = '';
    list=''
    dialogVisible = false;
    confirmTimeBegin=''
    confirmTimeEnd=''
    form = {
        name: '',
        code: '',
        date : ''
    };
    conmonDisabled:boolean=false;
    constructor(){
        super();

    };
     // 序号
    indexMethod(index) {
    return (this.page - 1) * this.pageSize + index + 1;
    }
    getTime(row) {
        if(row!=undefined) {
            return moment(row).format('YYYY-MM-DD HH:mm:ss')
        }
    }
    searchErrorList(){
        this.page =1
        this.onlyShowError = true;
        this.searchList();
    }

    searchAllList(){
        this.page=1
        this.onlyShowError = false;
        this.searchList();
    }

    searchList(){
        let params = {
            pageNum: this.page,
            pageSize: this.pageSize,
            // status: 0,
            cinemaName: this.cinemaName,
            cinemaCode: this.cinemaCode,
            startTime:this.confirmTimeBegin == ''? moment(moment().subtract(1, 'days')).format('YYYY-MM-DD HH:mm:ss'):moment(this.confirmTimeBegin).format('YYYY-MM-DD HH:mm:ss')
        }
        //console.log(params)

        this.data = [];
        let list = [];
        this.loading=true;
        Service.selectShowLog(params).then(res=>{
            //console.log(res)
            if(res.data.succeeded){
                this.data = res.data.data;
                this.total = res.data.totalRecords;
                this.loading=false;
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
                this.loading=false;
            }
        })
        // for(let i=0;i<30;i++){
        //     list.push({
        //         id: i,
        //         name : '影厅名称' + i,
        //         cinemaName : (i+1)+'号厅' ,
        //         movie: 'ShengXiaWeiLai-2D_185_JP_115M_PTH_51_0721',
        //         totalTime: '02:00:54',
        //         playDate: '2021-11-18',
        //         playTime: '08:00~10:00',
        //     });
        // }

        // this.data = list;

        
    }

    handleSizeChange(val) {
        this.pageSize = val;
        this.searchList();
    }

    handleCurrentChange(val) {
        this.page = val;
        this.searchList();
    }

    showDetail(){

    }

    dateFormat(date){
        return moment(date).format("YYYY-MM-DD,H:m:s");
    }

    resizeEvent(){
        this.windowHeight = document.documentElement.clientHeight;
        this.height = this.windowHeight - 210;
    }
     getShanxuan() {
            // debugger
            this.$refs.componentChild.getShow();
            this.conmonDisabled = true;
            this.list = 'log'
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210 - 95;
        }
        condition(data) {
            console.log(data)
            this.page = 1
            this.cinemaName = data.user
            this.cinemaCode = data.user1
            this.confirmTimeBegin = (data.user9 == null||data.user9=='')?'': moment(data.user9).format('YYYY-MM-DD HH:mm:ss')
            this.searchList()

            // this.windowHeight = document.documentElement.clientHeight;
            // this.height = this.windowHeight - 210 + 80;
        }
        conmonDisabledNone(conmonDisabled) {
            
            this.conmonDisabled = false;
            this.cinemaName = conmonDisabled.user;
            this.cinemaCode = conmonDisabled.user1;
            this.windowHeight = document.documentElement.clientHeight;
            this.confirmTimeBegin = ''
            this.height = this.windowHeight - 210;
            this.searchList();
        }
    created(){
        const me = this;
        this.resizeEvent();
        this.searchList();
        window.onresize = () => {
            return (() => {
                me.resizeEvent();
            })()
        };
    };
    mounted(){

    };

}
</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss';

</style>